<template>
  <div class="city">
    <div class="top">
      <!-- 搜索框 -->
      <van-search show-action shape="round" v-model="searchValue" placeholder="城市/区域/位置" @cancel="handleCancel" />
      <!-- tab标签 -->
      <van-tabs
        v-model:active="activeTab"
        color="var(--primary-color)"
        line-height="2px">
        <template v-for="(value, key) in allCity" :key="key">
          <van-tab :title="value.title" :name="key"></van-tab>
        </template>
      </van-tabs>
    </div>
    <div class="content">
      <template v-for="(value, key, index) in allCity" :key="index">
        <CityGroupVue v-show="activeTab === key" :groupData="value"></CityGroupVue>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue"
import { storeToRefs } from "pinia"
import { useRouter } from "vue-router"
import { useCityStore } from "@/store"
import CityGroupVue from "./components/CityGroup.vue"

const router = useRouter()

// 搜索框功能
const searchValue = ref("")
const handleCancel = () => {
  router.back()
}

// tab功能
const activeTab = ref()

// 城市数据
const cityStore = useCityStore()
cityStore.fetchAllcityData()
const { allCity } = storeToRefs(cityStore)
console.log(allCity)

</script>

<style lang="less" scoped>
.city {
  .top {
    position: relative;
    z-index: 9;
  }
  .content {
    height: calc(100vh - 98px);
    overflow-y: auto;
  }
}
</style>
